<template>
  <div class="app-container" :style="{ height: windowHeight - 200 + 'px' }">
    <div id="container" />
  </div>
</template>

<script>
import AMap from 'AMap'

export default {
  data() {
    return {
      map: null,
      marker: null,
      polyline: null,
      // 实时屏幕高度
      windowHeight: document.documentElement.clientHeight,
      mapStyle: 'grey'
    }
  },
  mounted() {
    // 当浏览器被重置大小时执行
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight
      })()
    }
    this.initAMap()
    // this.getMarker()
    this.getLine()
  },
  methods: {
    // 地图初始化方法
    /**
     * 高德地图Key (先用这个4056aa1b76794cdb8df1d5ee0000bdb8)
     * 引入是在index.html进行的同步加载，此项目直接使用的是原生高德，这样咱们自由化程度高
     * 高德API文档 https://lbs.amap.com/api/jsapi-v2/summary/
     * 示例控制台 https://lbs.amap.com/demo/jsapi-v2/example/map-lifecycle/map-show
     */
    initAMap() {
      this.map = new AMap.Map('container', {
        // 这里重新设置成项目的地点和缩放
        zoom: 11,
        center: [116.397428, 39.90923],
        terrain: true
      })
      // 使用CSS默认样式定义地图上的鼠标样式
      this.map.setDefaultCursor('pointer')
      const mapStyle = 'amap://styles/grey'
      this.map.setMapStyle(mapStyle)
    },
    // 点
    getMarker() {
      // let markerIcon = require("")
      // this.marker = new AMap.Marker({
      //   position: new AMap.LngLat(116.39, 39.9),
      //   offset: new AMap.Pixel(-10, -10),
      //   icon: markerIcon
      // })
      //
      // this.map.add(this.marker)
    },
    // 线
    getLine() {
      const path = [
        [116.362209, 39.887487],
        [116.422897, 39.878002],
        [116.372105, 39.90651],
        [116.428945, 39.89663]
      ]
      this.polyline = new AMap.Polyline({
        path: path,
        isOutline: false,
        strokeColor: '#ff9999',
        strokeOpacity: 1,
        strokeWeight: 2,
        strokeStyle: 'solid',
        lineJoin: 'round',
        lineCap: 'round',
        // 当多点连线时候记得marker设置下zIndex，然后把这个设置在marker下面
        zIndex: 50
      })
      this.map.add(this.polyline)
    }
  }
}
</script>

<style scoped>
#app-container {
  width: 100%;
  position: relative
}

#container {
  width: 100%;
  height: 700px;
}

.amap-icon {
  width: 20px;
  height: 20px;
}

</style>
